<template>
  <div class="querySetup">
    <el-popover placement="bottom" v-model="visible">
      <div class="itemName" style="text-align: center;cursor: pointer;" @mouseover="hover('over')" @mouseout="hover('')" @click="showDialog" ref="itemName">条件设置</div>
      <div class="setBtn" slot="reference">
        <i class="el-icon-arrow-down"></i>
      </div>
    </el-popover>
    <el-dialog title="设置查询区域布局" :visible.sync="dialogTableVisible" width="775px">
      <el-tabs v-model="activeName">
        <el-tab-pane label="查询字段设置" name="first">
          <el-table
            :data="tableDatas"
            height="324px"
            style="width: 100%">
            <el-table-column
              width="60"
              prop=""
              label="序号">
              <template slot-scope="scope">
                <span>{{ scope.$index + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="displayText"
              label="条件名称">
            </el-table-column>
            <el-table-column
              width="60"
              prop="visible"
              label="显示">
              <template slot-scope="scope">
                <el-checkbox :true-label="1" :false-label="0" v-model="scope.row.visible" @change="handleClick"></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column
              width="280"
              prop="matchMode"
              label="条件类型">
              <template slot-scope="scope">
                <el-radio-group v-model="scope.row.matchMode" @change="handleClick">
                  <el-radio :label="0" :disabled="scope.row.allowMatchMode.indexOf('0') === -1? true: false">单值</el-radio>
                  <el-radio :label="1" :disabled="scope.row.allowMatchMode.indexOf('1') === -1? true: false">多值</el-radio>
                  <el-radio :label="2" :disabled="scope.row.allowMatchMode.indexOf('2') === -1? true: false">区间</el-radio>
                </el-radio-group>
              </template>
            </el-table-column>
            <el-table-column
              width="160"
              prop="matchLevel"
              label="匹配精度">
              <template slot-scope="scope">
                <el-radio-group v-model="scope.row.matchLevel" @change="handleClick">
                  <el-radio :label="0" :disabled="scope.row.allowMatchLevels.indexOf('0') === -1? true: false">精确</el-radio>
                  <el-radio :label="1" :disabled="scope.row.allowMatchLevels.indexOf('1') === -1? true: false">模糊</el-radio>
                </el-radio-group>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="布局调整" name="second">
          <div class="drag">
            <el-scrollbar class="scroll">
              <div class="color-list">
              <div
                class="color-item"
                v-for="item in dragList"
                v-dragging="{ item: item, list: dragList}"
                :key="item.displayText">
                {{item.displayText}}
              </div>
            </div>
            </el-scrollbar>
          </div>
        </el-tab-pane>
      </el-tabs>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible = false">取消</el-button>
        <el-button type="primary" @click="submit">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'query-setup',
  props: {
    // 传入数组，查询字段列表
    tableData: {
      type: Array,
      default: function () {
        return []
      }
    }
  },
  data () {
    return {
      visible: false,
      dialogTableVisible: false,
      activeName: 'first',
      dragList: [],
      checkList: [],
      tableDatas: []
    }
  },
  created () {
    this.getInfo()
  },
  mounted () {
    // 拖拽触发事件
    this.$dragging.$on('dragged', ({ value }) => {
      this.dragList = value.list
    })
    // this.$dragging.$on('dragend', () => {
    //   console.log('2')
    // })
  },
  watch: {
    checkList: {
      handler (newVal, oldVal) {
        if (this.dragList.length === 0) {
          this.dragList = [...newVal]
        } else {
          if (newVal.length > this.dragList.length) {
            newVal.map((val, ind) => {
              let flag = true
              this.dragList.map((item, index) => {
                if (val.displayText === item.displayText) {
                  this.dragList[index] = newVal[ind]
                  flag = false
                }
              })
              if (flag) {
                this.dragList.push(val)
              }
            })
          } else if (newVal.length < this.dragList.length) {
            this.dragList.map((val, ind) => {
              let flag = true
              newVal.map((item, index) => {
                if (val.displayText === item.displayText) {
                  this.dragList[ind] = newVal[index]
                  flag = false
                }
              })
              if (flag) {
                this.dragList.splice(ind, 1)
              }
            })
          }
        }
      },
      deep: true
    }
  },
  methods: {
    // 模拟hover事件
    hover (status) {
      this.$refs.itemName.style.color = '#606266'
      if (status) {
        this.$refs.itemName.style.color = '#4099ff'
      }
    },
    // 弹框显示
    showDialog () {
      this.visible = false
      this.dialogTableVisible = true
    },
    // 获取选中数组
    getResultList () {
      let list = []
      this.tableDatas.map((item, index) => {
        if (item.visible === 1) {
          list.push(item)
        }
      })
      return list
    },
    // 改变选中项数组
    handleClick () {
      this.checkList = this.getResultList()
    },
    // 保存
    submit () {
      let arr = [...this.dragList]
      let inputs = arr.length > 0 ? arr : this.getResultList()
      this.$axios.post('api/component/save', {
        appName: 'BeJson',
        functionName: 'deploy',
        appVersion: 'V1.0.0',
        userId: '156451321564564',
        creator: '未命名',
        fieldModels: [...inputs]
      }).then((res) => {
        if (res && res.data.code === 200) {
          this.getInfo(() => {
            this.dialogTableVisible = false
          })
        }
      })
    },
    // 获取信息
    getInfo (callBack) {
      this.$axios.get('api/component/BeJson/deploy/V1.0.0/query/156451321564564').then((res) => {
        res.data.data.fieldModels.map((val, ind) => {
          this.tableData.map((item, index) => {
            if (val.displayText === item.displayText && val.visible === 1) {
              this.tableData[index] = val
            }
          })
        })
        this.tableDatas = this.tableData
        this.checkList = res.data.data.fieldModels
        this.$emit('getInputs', res.data.data.fieldModels)
        callBack && callBack()
      })
    }
  }
}
</script>

<style lang='scss' scoped>
.querySetup {
  /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
  ::-webkit-scrollbar {
    width: 6px;
    height: 27px;
    background-color: rgba(144, 147, 153, 0.3);
  }

  /*定义滚动条轨道 内阴影+圆角*/
  ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 1);
    border-radius: 10px;
    background-color: #f5f5f5;
  }

  /*定义滑块 内阴影+圆角*/
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(144, 147, 153, 0.3);
    background-color: rgba(144, 147, 153, 0.3);
  }
  cursor: pointer;
  display: inline-block;
  .setBtn {
    width: 27px;
    height: 36px;
    text-align: center;
    line-height: 36px;
    border-radius: 4px;
    color: #fff;
    background: rgba(3, 120, 255, 1);
  }
  .drag {
    height: 324px;
    .scroll {
      height: 100%;
      & /deep/ .el-scrollbar__wrap {
        overflow-x: hidden;
        // .el-scrollbar__view {
        //   padding-right: 20px;
        // }
      }
    }
    border: 1px dashed #4099ff;
    .color-list {
      width: 100%;
      min-height: 324px;
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;
      padding: 20px;
      box-sizing: border-box;
      .color-item {
        width: 192px;
        height: 48px;
        line-height: 48px;
        text-align: center;
        margin: 19px;
        background: rgba(64, 153, 255, 1);
        font-size: 16px;
        font-family: MicrosoftYaHei-Bold;
        font-weight: bold;
        color: rgba(255, 255, 255, 1);
      }
    }
  }
}
</style>
